<template>
  <div style="padding: 49px 36px 0 36px" class="flex">
    <dataCard title="未完成员工明细" height="919" width="1848">
      <div class="trainerBox" style="padding: 46px 0 0 11px">
        <el-form
          @submit.native.prevent
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="110px"
        >
          <el-form-item label="门店名称" prop="schoolId">
            <el-select v-model="queryParams.schoolId" filterable clearable>
              <el-option label="全部" :value="undefined"></el-option>
              <el-option
                v-for="item in schools"
                :key="item.schoolId"
                :label="item.schoolName"
                :value="item.schoolId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工姓名" prop="nickName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入员工姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item label="岗位" prop="postId">
            <el-select v-model="queryParams.postId" filterable clearable>
              <el-option label="全部" :value="undefined"></el-option>
              <el-option
                v-for="item in posts"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程" prop="courseId">
            <el-select v-model="queryParams.courseId" filterable clearable>
              <el-option label="全部" :value="undefined"></el-option>
              <el-option
                v-for="item in courses"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="训练员" prop="teaUserId">
            <el-select v-model="queryParams.teaUserId" filterable clearable>
              <el-option label="全部" :value="undefined"></el-option>
              <el-option
                v-for="item in teachers"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              v-preventReClick
              type="primary"
              plain
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button
              v-preventReClick
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
              >重置</el-button
            >
            <el-button
              v-preventReClick
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          style="margin: 10px 0 5px 0"
          height="665"
          ref="tableRef"
          border
          v-loading="loading"
          :data="postList"
        >
          <el-table-column
            label="门店名称"
            show-overflow-tooltip
            align="center"
            prop="schoolName"
          >
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="员工姓名"
            align="center"
            prop="nickName"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="岗位"
            align="center"
            prop="postNames"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="未完成课程名称"
            align="center"
            width="130"
            prop="courseName"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="训练员"
            align="center"
            prop="teacherNames"
          >
          </el-table-column>
          <el-table-column
            label="课程下发时间"
            align="center"
            prop="courseSendTime"
          >
          </el-table-column>
          <el-table-column
            label="学习进度"
            align="center"
            prop="learningProgress"
          >
            <template slot-scope="scope">
              {{ scope.row.learningProgress }}%
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="未完成情况备注"
            align="center"
            prop="unFinishRemark"
          >
            <template slot-scope="scope">
              <div
                @dblclick="handleDoubleClick(scope.row, scope.$index)"
                style="width: 100%; height: 100%"
                v-if="!scope.row.editing"
              >
                {{ scope.row.unFinishRemark || "无" }}
              </div>
              <el-input
                ref="input_dom"
                v-if="scope.row.editing"
                v-model="scope.row.unFinishRemark"
                size="small"
                @blur="onRemarkBlur(scope.row, scope.$index, 1)"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </dataCard>
  </div>
</template>
    
  <script>
import {
  unFinishUserList,
  courseList,
  schoolList,
  postList,
  teacherList,
} from "@/api/screen/courseLearningManagement";
import { editRemark } from "@/api/screen/train";
import dataCard from "./components/dataCard";
export default {
  components: {
    dataCard,
  },
  data() {
    return {
      loading: false,
      postList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        schoolId: undefined,
        postId: undefined,
        nickName: undefined,
        teaUserId: undefined,
        courseId: undefined,
      },
      total: 10,
      teachers: [],
      schools: [],
      posts: [],
      courses: [],
    };
  },
  mounted() {
    this.getList();
    this.getSchoolList();
    this.getPostList();
    this.getTeacherList();
    this.getCourseList();
  },

  methods: {
    async onRemarkBlur(row, index, type) {
      let res = await editRemark({ ...row, remarkType: 4 });
      if (res.code == 200) {
        this.$message.success("备注修改成功");
        this.$set(row, "editing", false);
      }
    },
    handleDoubleClick(row, index) {
      this.$set(row, "editing", true);
      this.$nextTick(() => {
        this.$refs.input_dom.focus();
      });
      // 确保DOM更新后再聚焦
    },
    async getTeacherList() {
      let res;
      try {
        res = await teacherList({ pageNum: 1, pageSize: 9999 });
        if (res.code == 200) {
          this.teachers = res.rows;
        }
      } finally {
      }
    },
    async getPostList() {
      let res;
      try {
        res = await postList({ pageNum: 1, pageSize: 9999 });
        if (res.code == 200) {
          this.posts = res.rows;
          // 页面数据更新后，让表格滚动条回到顶部
          this.$nextTick(() => {
            if (this.$refs.tableRef) {
              this.$refs.tableRef.bodyWrapper.scrollTop = 0;
            }
          });
        }
      } finally {
      }
    },
    async getSchoolList() {
      let res;
      try {
        res = await schoolList({
          pageNum: 1,
          pageSize: 9999,
        });
        if (res.code == 200) {
          this.schools = res.rows;
        }
      } finally {
      }
    },
    async getCourseList() {
      let res;
      try {
        res = await courseList({
          pageNum: 1,
          pageSize: 9999,
          status: 0,
        });
        if (res.code == 200) {
          this.courses = res.rows;
        }
      } finally {
      }
    },
    async getList() {
      let res;
      try {
        this.loading = true;
        res = await unFinishUserList(this.queryParams);
        if (res.code == 200) {
          this.postList = res.rows;
          this.total = res.total;
        }
      } finally {
        this.loading = false;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/screen/course/exportUnFinishUserList",
        {
          ...this.queryParams,
        },
        `exportUnFinishUserList_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
    
    <style>
</style>